<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>圆环倒计时</title>
    <script type="text/javascript" src="js/jQuery/jquery-3.3.1.js"></script>
    <script type="text/javascript"  src="js/time.js"></script>
    <style>
    	html, body{width:100%;height:100%;padding:0;margin:0;}
		body{font-family:"微软雅黑","华文细黑",Arial, Helvetica, sans-serif;font-size:14px;color:#fff;user-select:none;-webkit-user-select:none;-webkit-text-size-adjust: none;background-color:#999;}

		.game_time{width:100px;height:100px;position:absolute;top:30%;left:40%;text-align:center;}

		/* time scroll*/
		.pie{width:200px;height:200px;background-color:blue;border-radius:100px;position:absolute;}
		.pie1{clip:rect(0px,200px,200px,100px);-o-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);background-color:#fff;}
		.pie2{clip:rect(0px,100px,200px,0px);-o-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);background-color:#fff;}
		.hold{width:200px;height:200px;position:absolute;z-index:1;}
		.bg{width:200px;height:200px;border-radius:200px;position:absolute;background-color:#d13c36;}
		.time{width:160px;height:160px;margin:20px 0 0 20px;background-color:#e45534;border-radius:160px;position:absolute;z-index:1;text-align:center;line-height:160px;font-size:30px;}

    </style>

</head>

<body>

	<div class="game_time">

		<div class="hold">
			<div class="pie pie1"></div>
		</div>

		<div class="hold">
			<div class="pie pie2"></div>
		</div>

		<div class="bg"> </div>
		
		<div class="time"></div>
	
	</div>



</body>
<script type="text/javascript">
	countDown();
</script>

</html>